<template>
	<div>
		<SelectArea
			id="test-select"
			v-model="oldSelect"
			v-slot="{allSelect,index,item}"
			:data="allData"
			:line-height="40">
			<div
				:key="index"
				class="item"
				:class="{selected:allSelect.has(item)}">{{item.name}}</div>
		</SelectArea>
	</div>
</template>

<script>
import SelectArea from '@/components/pc/select-area';
import {MySet} from '@/util/common';

export default {
	name:'index',
	components:{
		SelectArea,
	},
	data(){
		const allData=new MySet();
		for(let i=1;i<=100000;++i){
			allData.add({name:'内容内容内容内容'+i});
		}
		Object.freeze(allData);
		return {
			oldSelect:new MySet(),
			allData,
		};
	},
	methods:{
	}
};
</script>

<style lang="scss">
#test-select{
	user-select:none;
	margin:20px;
	width:200px;
	height:400px;
	border:1px solid;
	display:inline-block;
	.item{
		width:300px;
		height:40px;
		line-height:40px;
		padding:0 20px;
		&.selected{
			background:#d4f2ff;
		}
	}
}
</style>
